<template>
  <div style="margin-right: 12px">
    <a-space>
      <a style="padding: 0 12px; display: inline-block; user-select: none" @click="handleClick"><BgColorsOutlined /></a>
      <a-dropdown>
        <template #overlay>
          <a-menu>
            <a-menu-item>
              <template #icon>
                <SettingOutlined />
              </template>
              <span @click="viewDetails()">个人设置</span>
            </a-menu-item>
            <a-menu-item>
              <template #icon>
                <LogoutOutlined />
              </template>
              <span @click="toLogin()">退出登录</span>
            </a-menu-item>
          </a-menu>
        </template>
        <a-avatar shape="square" size="normal">
          <template #icon>
            <!-- <UserOutlined /> -->
            <img :src="userInfo?.avatarUrl"/>
          </template>
          {{ currentUser.nickname }}
        </a-avatar>
      </a-dropdown>
    </a-space>
  </div>
</template>

<script setup lang="ts">
import { UserOutlined, SettingOutlined, LogoutOutlined, BgColorsOutlined } from '@ant-design/icons-vue';
import { apply, randomTheme } from '../../hooks/useTheme';
import { useRouter } from 'vue-router';
import { onMounted,ref } from "vue";
import type { Ref } from "vue";
import type { DataItem } from "@/type/type";
import getUsersInfo from "@/hooks/getUsers";
export type CurrentUser = {
  nickname: string;
  avatar?: string;
};

defineProps<{
  currentUser: CurrentUser;
}>();

const handleClick = () => {
  apply(randomTheme());
};

// 创建响应式引用
const userInfo: Ref<DataItem | null> = ref(null); // 初始化为 null

onMounted(async () => {
  userInfo.value = await getUsersInfo(localStorage.getItem('userAccount'));
});

const router = useRouter();

const viewDetails = () => {
  // router.addRoute({name:'detail',path:'/detail',component:()=>import( '@/views/Detail.vue')})
  // router.replace(router.currentRoute.value.fullPath)
  // router.hasRoute()
    // alert(`Viewing details for ${record.username}`);
  const url = router.resolve(
    { 
      name: 'detail',
      query: { param:userInfo.value?.userAccount }
     }).href;
  window.open(url, '_blank');
};
const toLogin = () => {
  localStorage.setItem('userInfo','null');
  router.replace({path:'/login'})
}
</script>
